<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Excel批量正则匹配工具</title>
    <script src="js/vue.global.prod.js"></script>
    <script src="js/dayjs.min.js"></script>
    <script src="js/antd.min.js"></script>
    <link rel="stylesheet" href="css/antd.min.css" type="text/css">
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
</head>
<body>
<div id="app">
    <a-spin :spinning="spinning" :delay="500">
        <template v-slot:tip>{{tip}}</template>
        <a-form
                layout="horizontal"
                :model="fileState"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 18 }"
                @finish="onFilePathEnsure"
                v-if="pageNum === 0"
        >
            <a-form-item
                    label="正则文件："
                    :rules="[{ required: true, message: '请选择正则文件', trigger:'blur' }]"
                    name="regFilePath"
            >
                <a-input-group compact>
                    <a-input v-model:value="fileState.regFilePath" disabled style="width: calc(100% - 200px)"></a-input>
                    <a-button @click="chooseExcel('reg')">选择</a-button>
                </a-input-group>
            </a-form-item>
            <a-form-item
                    label="文本文件："
                    :rules="[{ required: true, message: '请选择文本文件', trigger:'blur' }]"
                    name="textFilePath"
            >
                <a-input-group compact>
                    <a-input v-model:value="fileState.textFilePath" disabled
                             style="width: calc(100% - 200px)"></a-input>
                    <a-button @click="chooseExcel('text')">选择</a-button>
                </a-input-group>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" html-type="submit">确认</a-button>
            </a-form-item>
        </a-form>

        <a-form
                layout="horizontal"
                :model="formState"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 18 }"
                v-if="pageNum === 1"
                @finish="onFinalEnsure"
        >
            <a-form-item
                    label="文本列："
                    :rules="[{ required: true, message: '请选择文本列', trigger:'change' }]"
                    name="textColumn"
            >
                <a-select
                        v-model:value="formState.textColumn"
                        :options="textColumns"
                ></a-select>
            </a-form-item>
            <a-form-item
                    label="规则描述列："
                    :rules="[{ required: true, message: '请选择规则描述列', trigger:'change' }]"
                    name="textColumn"
            >
                <a-select
                        v-model:value="formState.regColumn"
                        :options="regColumns"
                ></a-select>
            </a-form-item>
            <a-form-item
                    label="正则列展示："
            >
                <a-list size="small" bordered :data-source="regColumns" :render-item="listItemRender"></a-list>
            </a-form-item>
            <a-form-item
                    label="码表逻辑："
                    :rules="[{ required: true, message: '码表逻辑不能为空', trigger:'blur' }]"
                    name="logicCode"
            >
                <a-auto-complete v-model:value="formState.logicCode" placeholder="使用and、or、not、()、数字索引"></a-auto-complete>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-space>
                    <a-button type="primary" html-type="submit">确认</a-button>
                    <a-button @click="preStep">上一步</a-button>
                </a-space>
            </a-form-item>
        </a-form>
    </a-spin>

</div>
</body>
<script type="text/javascript">
    new QWebChannel(qt.webChannelTransport, (channel) => {
        const my_object = channel.objects.MyObject;
        const app = Vue.createApp({
            setup(props, context) {
                const fileState = Vue.reactive({
                    regFilePath: '',
                    textFilePath: ''
                });

                const formState = Vue.reactive({
                    textColumn: '',
                    regColumn: '',
                    logicCode: '',
                });

                //选择excel文件
                let chooseExcel = type => my_object.chooseExcel(type);
                my_object.sigSetVueRegFilePath.connect((fileName, fileType) => {
                    if (fileType === 'reg') {
                        fileState.regFilePath = fileName;
                    } else if (fileType === 'text') {
                        fileState.textFilePath = fileName;
                    }
                });

                //切换页面
                const pageNum = Vue.ref(0);
                const spinning = Vue.ref(false);
                const tip = Vue.ref('');
                const regColumns = Vue.ref([]);
                const textColumns = Vue.ref([]);
                const onFilePathEnsure = () => {
                    my_object.initPage2();
                    tip.value = '加载中请骚等！';
                    spinning.value = true;
                }
                my_object.sigSetVueRegColumns.connect((text_columns, reg_columns) => {
                    textColumns.value = text_columns;
                    regColumns.value = reg_columns;
                    pageNum.value = 1;
                    spinning.value = false;
                });

                //因为antVue3插槽有bug，使用渲染函数
                const listItemRender = ({item}) => Vue.h('h5',`${item.value}： ${item.label}`);

                const onFinalEnsure = () => {
                    my_object.start(formState.textColumn, formState.regColumn, formState.logicCode);
                    spinning.value = true;
                    tip.value = '处理中请骚等！'
                }

                my_object.sigInfo.connect((msg, type) => {
                    switch (type) {
                        case 'error':
                            antd.message.error(msg);
                            spinning.value = false;
                            break;
                        case 'success':
                            antd.message.success(msg);
                            spinning.value = false;
                            break
                    }
                });

                my_object.sigLoadingTip.connect(msg => {
                    tip.value = msg;
                });

                //上一步
                const preStep = () => {
                    pageNum.value = 0;
                    formState.logicCode = "";
                    formState.regColumn = "";
                    textColumns.value = [];
                    regColumns.value = [];
                }

                return {
                    formState,
                    fileState,
                    pageNum,
                    spinning,
                    tip,
                    regColumns,
                    textColumns,
                    chooseExcel,
                    onFilePathEnsure,
                    listItemRender,
                    onFinalEnsure,
                    preStep,
                }
            }
        });
        app.use(antd)
        app.mount('#app');
    })

</script>
</html>